import React, { useState } from 'react';
import { Card, Row, Col, Typography } from 'antd';
import { PieChartOutlined, BarChartOutlined, LineChartOutlined, AreaChartOutlined, DatabaseOutlined, UserOutlined } from '@ant-design/icons';
import CartRateTable from '../modules/CartRateTable';
import CategoryInteraction from '../modules/CategoryInteraction';
import DailyBehaviorStats from '../modules/DailyBehaviorStats';
import PurchaseRateTable from '../modules/PurchaseRateTable';
import UserCityLevel from '../modules/UserCityLevel';
import UserDeviceStats from '../modules/UserDeviceStats';

const { Title, Text } = Typography;

// 模块配置信息
const modules = [
  {
    id: 'cart-rate',
    title: '购物车转化率',
    icon: <PieChartOutlined />,
    component: <CartRateTable />,
    description: '分析用户购物车到购买的转化情况',
    color: '#1890ff'
  },
  {
    id: 'category-interaction',
    title: '分类互动统计',
    icon: <BarChartOutlined />,
    component: <CategoryInteraction />,
    description: '各商品分类的用户互动数据',
    color: '#52c41a'
  },
  {
    id: 'daily-behavior',
    title: '每日行为统计',
    icon: <LineChartOutlined />,
    component: <DailyBehaviorStats />,
    description: '用户每日行为类型统计数据',
    color: '#faad14'
  },
  {
    id: 'purchase-rate',
    title: '购买率分析',
    icon: <AreaChartOutlined />,
    component: <PurchaseRateTable />,
    description: '用户购买率趋势分析',
    color: '#f5222d'
  },
  {
    id: 'user-city',
    title: '用户城市等级',
    icon: <DatabaseOutlined />,
    component: <UserCityLevel />,
    description: '不同城市等级的用户分布',
    color: '#722ed1'
  },
  {
    id: 'user-device',
    title: '用户设备统计',
    icon: <UserOutlined />,
    component: <UserDeviceStats />,
    description: '用户使用的设备类型分布',
    color: '#13c2c2'
  }
];

const Dashboard = () => {
  const [selectedModule, setSelectedModule] = useState(null);

  const handleModuleClick = (module) => {
    setSelectedModule(module);
  };

  const handleBack = () => {
    setSelectedModule(null);
  };

  if (selectedModule) {
    return (
      <div className="dashboard-detail">
        <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center' }}>
          <button 
            onClick={handleBack} 
            style={{
              marginRight: 16,
              padding: '6px 12px',
              border: '1px solid #d9d9d9',
              borderRadius: '4px',
              background: 'white',
              cursor: 'pointer'
            }}
          >
            ← 返回
          </button>
          <Title level={2} style={{ margin: 0, color: selectedModule.color }}>
            {selectedModule.title}
          </Title>
        </div>
        <Card variant="outlined">
          {selectedModule.component}
        </Card>
      </div>
    );
  }

  return (
    <div className="dashboard">
      <Title level={1} style={{ textAlign: 'center', marginBottom: 40 }}>电商平台用户行为分析系统</Title>
      <Row gutter={[16, 16]}>
        {modules.map((module) => (
          <Col xs={24} sm={12} md={8} key={module.id}>
            <Card
              hoverable
              style={{ height: '100%', cursor: 'pointer' }}
              onClick={() => handleModuleClick(module)}
              variant="outlined"
              styles={{ body: { padding: 24 } }}
            >
              <div style={{ fontSize: '32px', marginBottom: 16, color: module.color }}>
                {module.icon}
              </div>
              <Title level={4} style={{ marginBottom: 8 }}>{module.title}</Title>
              <Text type="secondary">{module.description}</Text>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default Dashboard;